<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery鼠标悬停图片上下滚动切换 -- 懒人之家</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 代码begin -->
<div class="lanrenzhijia">
      <ul class="box">
      
            <li>
              <div class="box1">
                <div class="toll_img"><img src="images/in_img1.jpg" width="272" height="514"/></div>
                <div class="toll_info"><a href="http://www.lanrenzhijia.com/"><img src="images/in_img1_ho.jpg" height="514" width="272" /></a></div>
              </div>
            </li>
            
            <li>
              <div class="box1">
                <div class="toll_img"><img src="images/in_img2.jpg" width="272" height="514"/></div>
                <div class="toll_info"><a href="http://www.lanrenzhijia.com/"><img src="images/in_img2_ho.jpg" height="514" width="272" /></a></div>
              </div>
            </li>
            
            <li>
              <div class="box1">
                <div class="toll_img"><img src="images/in_img3.jpg" width="272" height="514"/></div>
                <div class="toll_info"><a href="http://www.lanrenzhijia.com/"><img src="images/in_img3_ho.jpg" height="514" width="272" /></a></div>
              </div>
            </li>
            
            <li>
              <div class="box1">
                <div class="toll_img"><img src="images/in_img4.jpg" width="272" height="514"/></div>
                <div class="toll_info"><a href="www.lanrenzhijia.com/"><img src="images/in_img4_ho.jpg" height="514" width="272" /></a></div>
              </div>
            </li>
            
      </ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
	$('.box .box1').mouseover(function(){
		$(this).stop().animate({"top":"-514px"}, 200); 
	})
	$('.box .box1').mouseout(function(){
		$(this).stop().animate({"top":"0"}, 200); 
	})
});
</script>
<!-- 代码end -->
</body>
</html>